Pure.CSS এর Animation এবং Effects

Web Development - পিওর.সিএসএস (Pure.CSS)

157

Pure.CSS একটি হালকা ও মডুলার CSS ফ্রেমওয়ার্ক যা মূলত স্টাইলিংয়ের জন্য ব্যবহার করা হয়। তবে, এটি Animation এবং Effects এর জন্য কিছু মৌলিক স্টাইল প্রদান করে। এই ফ্রেমওয়ার্কে CSS ট্রানজিশন এবং অ্যানিমেশন ব্যবহার করে ইন্টারেক্টিভ ও ডাইনামিক ওয়েব পেজ তৈরি করা যায়। এখানে আমি কিছু সাধারণ অ্যানিমেশন এবং ইফেক্টস তৈরি করার উদাহরণ দেব যা আপনি Pure.CSS এর সাহায্যে ওয়েব পেজে ব্যবহার করতে পারবেন।

১. Basic CSS Transitions in Pure.CSS

CSS ট্রানজিশন দিয়ে সহজে হালকা অ্যানিমেশন তৈরি করা যায়। এটি একটি উপাদানের বৈশিষ্ট্য পরিবর্তন করার পর সেটির অবস্থান স্লো মুভমেন্টে পরিবর্তিত হতে সহায়তা করে।

উদাহরণ: Button Hover Effect

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Button Hover Effect</title>
  <style>
    .pure-button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 12px 20px;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
    }

    .pure-button:hover {
      background-color: #45a049;
      transform: scale(1.1);
    }
  </style>
</head>
<body>

  <button class="pure-button">Hover over me!</button>

</body>
</html>

উদাহরণ বিশ্লেষণ:

transition: background-color এবং transform প্রপার্টিগুলির উপর একটি অ্যানিমেশন ইফেক্ট যুক্ত করা হয়েছে। 0.3s নির্দেশ করে যে এই অ্যানিমেশনটি 0.3 সেকেন্ডে সম্পন্ন হবে।
transform: scale(1.1): হোভার করার সময় বাটনটি একটু বড় হয়ে যাবে (১.১ গুণ আকারে)।

২. CSS Keyframes Animation in Pure.CSS

কিছু বেশি জটিল অ্যানিমেশন তৈরি করার জন্য keyframes ব্যবহার করা হয়, যা একটি উপাদানকে একাধিক অবস্থায় অ্যানিমেট করতে সক্ষম।

উদাহরণ: Bouncing Ball Animation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Bouncing Ball Animation</title>
  <style>
    .ball {
      width: 50px;
      height: 50px;
      background-color: #4CAF50;
      border-radius: 50%;
      position: relative;
      animation: bounce 1s infinite;
    }

    @keyframes bounce {
      0% {
        top: 0;
      }
      50% {
        top: 200px;
      }
      100% {
        top: 0;
      }
    }
  </style>
</head>
<body>

  <div class="ball"></div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

@keyframes bounce: এই অ্যানিমেশনটি একটি বাউন্সিং (উচ্চতা পরিবর্তন) ইফেক্ট তৈরি করে, যা 0% থেকে 100% পর্যন্ত চলে।
animation: bounce 1s infinite: bounce অ্যানিমেশনটি 1 সেকেন্ডে একবার সম্পন্ন হবে এবং এটি চিরকাল (infinite) চলতে থাকবে।

৩. Fade In Animation in Pure.CSS

ফেড ইন অ্যানিমেশনটি অনেক ওয়েবসাইটে সাধারণত ব্যবহৃত হয়, যাতে উপাদানটি স্ক্রিনে আসার সময় ধীরে ধীরে দৃশ্যমান হয়।

উদাহরণ: Fade In Effect

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Fade In Effect</title>
  <style>
    .fade-in {
      opacity: 0;
      animation: fadeIn 2s forwards;
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  </style>
</head>
<body>

  <div class="fade-in">
    <h1>Welcome to the Website!</h1>
    <p>This text fades in when the page loads.</p>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

@keyframes fadeIn: এটি একটি ফেড ইন অ্যানিমেশন তৈরি করে, যেখানে উপাদানটি ধীরে ধীরে দৃশ্যমান হবে।
animation: fadeIn 2s forwards: ফেড ইন অ্যানিমেশনটি 2 সেকেন্ডে সম্পন্ন হবে এবং উপাদানটি পূর্ণভাবে দৃশ্যমান হওয়ার পর স্থির থাকবে।

৪. Slide In Animation in Pure.CSS

Slide In অ্যানিমেশন উপাদানকে একটি নির্দিষ্ট দিক থেকে স্লাইড করার জন্য ব্যবহৃত হয়, এটি বিশেষত সাইডবার বা মেনুতে ব্যবহৃত হয়।

উদাহরণ: Slide In Effect

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Slide In Effect</title>
  <style>
    .slide-in {
      transform: translateX(-100%);
      animation: slideIn 1s forwards;
    }

    @keyframes slideIn {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0);
      }
    }
  </style>
</head>
<body>

  <div class="slide-in">
    <h1>This content slides in from the left!</h1>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

transform: translateX(-100%): উপাদানটি পৃষ্ঠা থেকে বাম দিকে সরে থাকে।
animation: slideIn 1s forwards: স্লাইড ইন অ্যানিমেশনটি 1 সেকেন্ডে সম্পন্ন হবে এবং শেষ হওয়ার পর উপাদানটি নিজের স্থানে থাকবে।

Pure.CSS ব্যবহার করে আপনি CSS অ্যানিমেশন এবং ইফেক্টগুলি খুব সহজেই ব্যবহার করতে পারেন। আপনি transition, keyframes animation, hover effects, fade in, slide in, bounce, এবং transform প্রপার্টির মতো স্টাইলিং টেকনিক্স ব্যবহার করে ওয়েব পেজে ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় অ্যানিমেশন তৈরি করতে পারেন। এসব অ্যানিমেশন এবং ইফেক্টস ব্যবহার করার মাধ্যমে ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতা উন্নত করা যায়।

Content added By

Najjar Hossain Raju

Pure.CSS এর Built-in Animation Classes

162

Pure.CSS মূলত একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপমেন্টে সহজ এবং কার্যকরী স্টাইলিং সরবরাহ করে। তবে, Pure.CSS এর মধ্যে সরাসরি বিল্ট-ইন অ্যানিমেশন ক্লাস নেই, কারণ এটি মূলত একটি CSS ফ্রেমওয়ার্ক যা ফর্ম, টেবিল, মেনু, গ্রিড সিস্টেম এবং অন্যান্য মৌলিক স্টাইলিং কম্পোনেন্টে ফোকাস করে। তবে, আপনি Pure.CSS এর সাথে CSS Transitions এবং CSS Animations ব্যবহার করে অ্যানিমেশন তৈরি করতে পারেন।

এখানে Pure.CSS এর সাথে CSS Animations এবং CSS Transitions কিভাবে ব্যবহার করবেন তা নিয়ে কিছু উদাহরণ দেওয়া হলো।

১. Pure.CSS এর সাথে CSS Transitions:

CSS Transitions এর মাধ্যমে আপনি উপাদানগুলির মধ্যে অবস্থান পরিবর্তন বা অন্যান্য বৈশিষ্ট্যগুলিতে পরিবর্তন ঘটাতে পারেন। উদাহরণস্বরূপ, একটি বাটনের হোভার ইফেক্ট:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Button Hover Animation</title>
  <style>
    .pure-button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 4px;
      transition: background-color 0.3s, transform 0.3s; /* Transition on hover */
    }

    .pure-button:hover {
      background-color: #45a049;
      transform: scale(1.1); /* Scale on hover */
    }
  </style>
</head>
<body>

  <button class="pure-button">Hover Me!</button>

</body>
</html>

উদাহরণ বিশ্লেষণ:

transition প্রপার্টি দিয়ে ব্যাকগ্রাউন্ড কালার এবং ট্রান্সফর্ম (স্কেল) ইফেক্টে পরিবর্তন আনা হয়েছে।
:hover পসুডো-ক্লাস ব্যবহার করা হয়েছে, যা বাটনে মাউস হোভার করলে এক্সিকিউট হবে।
transform: scale(1.1); ইফেক্ট বাটনটিকে হোভার করার সময় বড় করে।

২. Pure.CSS এর সাথে CSS Keyframe Animations:

CSS Animations ব্যবহার করে আপনি আরও জটিল অ্যানিমেশন তৈরি করতে পারেন। উদাহরণস্বরূপ, একটি সিম্পল keyframes animation যেখানে একটি উপাদান ধীরে ধীরে ডানদিকে সরানো হচ্ছে:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Simple Animation with Pure.CSS</title>
  <style>
    .animate-box {
      width: 100px;
      height: 100px;
      background-color: #4CAF50;
      animation: moveRight 2s infinite; /* Apply animation */
    }

    @keyframes moveRight {
      0% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(200px);
      }
      100% {
        transform: translateX(0);
      }
    }
  </style>
</head>
<body>

  <div class="animate-box"></div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

@keyframes moveRight: এটি একটি কাস্টম অ্যানিমেশন যা 0% থেকে 100% পর্যন্ত পরিবর্তন ঘটে, যার মধ্যে উপাদানটি ডান দিকে সরে যাবে এবং পরে আবার তার মূল অবস্থানে ফিরে আসবে।
animation: moveRight অ্যানিমেশনটি 2 সেকেন্ড ধরে চলবে এবং infinite নির্দিষ্ট করলে এটি চিরকাল চলতে থাকবে।

৩. Pure.CSS এর সাথে Fade In and Fade Out Effect:

অ্যানিমেশন দিয়ে একটি উপাদানকে ধীরে ধীরে ফেড ইন বা ফেড আউট করা যেতে পারে। এটি ওয়েব পেজে উপাদানগুলির আবির্ভাব বা অদৃশ্য হওয়ার জন্য ব্যবহার করা যেতে পারে।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Fade In Animation</title>
  <style>
    .fade-in {
      opacity: 0;
      animation: fadeIn 2s forwards; /* Fade in animation */
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  </style>
</head>
<body>

  <div class="fade-in">
    <h2>This element fades in</h2>
    <p>This text will gradually appear when the page loads.</p>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

.fade-in: প্রথমে opacity: 0; দ্বারা উপাদানটি অদৃশ্য থাকে।
@keyframes fadeIn: অ্যানিমেশনটি 2 সেকেন্ডের মধ্যে উপাদানটির অপাসিটি 0 থেকে 1 পর্যন্ত পরিবর্তিত করে, ফলে এটি ধীরে ধীরে দৃশ্যমান হয়ে ওঠে।

৪. Pure.CSS এর সাথে Slide In Animation:

একটি উপাদানকে স্লাইড ইন করার জন্য @keyframes ব্যবহার করা যেতে পারে। এখানে একটি উদাহরণ দেওয়া হলো যেখানে একটি উপাদান ডানদিকে স্লাইড ইন করবে।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Slide In Animation</title>
  <style>
    .slide-in {
      position: relative;
      left: -300px;
      animation: slideIn 1s ease-out forwards;
    }

    @keyframes slideIn {
      0% {
        left: -300px;
      }
      100% {
        left: 0;
      }
    }
  </style>
</head>
<body>

  <div class="slide-in">
    <h2>This element slides in from the left</h2>
    <p>This text will slide in from the left side when the page loads.</p>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

.slide-in: উপাদানটি প্রথমে স্ক্রীনের বাইরে (left: -300px;) অবস্থানে থাকে।
@keyframes slideIn: অ্যানিমেশনটি 1 সেকেন্ডের মধ্যে উপাদানটিকে ডানদিকে স্লাইড করে এনে তার মূল অবস্থানে নিয়ে আসে।

obwohl Pure.CSS নিজে সরাসরি অ্যানিমেশন ক্লাস প্রদান করে না, তবে আপনি CSS Transitions এবং CSS Animations ব্যবহার করে সহজেই অ্যানিমেশন যোগ করতে পারেন। এই অ্যানিমেশনগুলি Pure.CSS এর অন্যান্য স্টাইলিং উপাদানগুলির সাথে মিলে ওয়েব পেজে ডাইনামিক এবং আকর্ষণীয় ইন্টারঅ্যাকশন তৈরি করতে সহায়তা করবে।

Content added By

Najjar Hossain Raju

Custom Animations এবং Transitions তৈরি করা

152

Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপমেন্টে দ্রুত এবং সুন্দর ডিজাইন তৈরি করতে সাহায্য করে। তবে, Pure.CSS সরাসরি বিল্ট-ইন অ্যানিমেশন ক্লাস বা ট্রানজিশন সরবরাহ করে না। তবে, আপনি CSS3 এর কাস্টম অ্যানিমেশন এবং ট্রানজিশন ব্যবহার করে Pure.CSS এর সাথে একটি শক্তিশালী অ্যানিমেশন এবং ট্রানজিশন সিস্টেম তৈরি করতে পারেন। নিচে Custom Animations এবং Transitions তৈরি করার উদাহরণ দেওয়া হলো।

১. Pure.CSS এর Built-in Animation Classes:

যদিও Pure.CSS এ সরাসরি অ্যানিমেশন সম্পর্কিত কোনো বিল্ট-ইন ক্লাস নেই, তবে আপনি CSS3 Animation ব্যবহার করে অ্যানিমেশন তৈরি করতে পারেন। এখানে কিছু সাধারণ অ্যানিমেশন উদাহরণ দেওয়া হলো:

a) Fade-in Animation:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Fade-in Animation</title>
  <style>
    .fade-in {
      opacity: 0;
      animation: fadeIn 2s forwards;
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  </style>
</head>
<body>

  <div class="fade-in pure-u-1-2">
    <h1>Welcome to Pure.CSS!</h1>
    <p>This content fades in when the page loads.</p>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

@keyframes fadeIn: এটি একটি কাস্টম অ্যানিমেশন তৈরি করে যা এলিমেন্টের opacity পরিবর্তন করে।
fade-in ক্লাস: এই ক্লাসটি অ্যাপ্লাই করা হলে, এলিমেন্টের opacity শুরু হয় ০ (অদৃশ্য) থেকে ১ (দৃশ্য) পর্যন্ত, এবং এটি 2 সেকেন্ড সময় নিয়ে সম্পন্ন হয়।

২. Custom Animations with CSS:

এখন, চলুন কিছু কাস্টম অ্যানিমেশন তৈরি করি। এখানে কিছু উদাহরণ দেওয়া হলো:

a) Bounce Animation:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Bounce Animation</title>
  <style>
    .bounce {
      animation: bounce 1s infinite;
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }
  </style>
</head>
<body>

  <div class="bounce pure-u-1-2">
    <h1>Bouncing Text</h1>
    <p>This text bounces up and down!</p>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

@keyframes bounce: এই অ্যানিমেশনটি এলিমেন্টটিকে উপরে (20px) এবং নিচে (0px) সরিয়ে দেয়, এবং এটি একটি নির্দিষ্ট সময়ের মধ্যে (১ সেকেন্ড) বারবার ঘটবে।
bounce ক্লাস: এলিমেন্টটির জন্য বাউন্স অ্যানিমেশন চালু করে।

b) Scale Animation:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Scale Animation</title>
  <style>
    .scale {
      animation: scaleUp 1s ease-in-out infinite alternate;
    }

    @keyframes scaleUp {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(1.2);
      }
    }
  </style>
</head>
<body>

  <div class="scale pure-u-1-2">
    <h1>Scaling Text</h1>
    <p>This text scales up and down!</p>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

@keyframes scaleUp: এই অ্যানিমেশনটি এলিমেন্টের আকার বৃদ্ধি করে (scale(1) থেকে scale(1.2)) এবং পরে পুনরায় ছোট হয়।
scale ক্লাস: এটি scaleUp অ্যানিমেশন চালু করে।

৩. CSS Transitions:

CSS3 Transition ব্যবহার করে আপনি কোনো উপাদানের স্টাইলের পরিবর্তনকে মসৃণভাবে করতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো:

a) Simple Hover Transition:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Hover Transition</title>
  <style>
    .transition-box {
      background-color: #4CAF50;
      color: white;
      padding: 20px;
      border-radius: 8px;
      transition: background-color 0.3s ease;
    }

    .transition-box:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>

  <div class="transition-box pure-u-1-2">
    <h1>Hover Over Me!</h1>
    <p>Watch the background color change smoothly.</p>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

transition: এটি ইনপুট পরিবর্তন করার সময় একটি অ্যানিমেশন (এখানে ব্যাকগ্রাউন্ড কালারের পরিবর্তন) যোগ করে, যা ০.৩ সেকেন্ডে মসৃণভাবে ঘটে।
:hover: যখন ব্যবহারকারী মাউস এলিমেন্টটির উপর রাখবে, তখন ব্যাকগ্রাউন্ড কালার পরিবর্তিত হবে।

b) Smooth Scale on Hover:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Scale on Hover</title>
  <style>
    .scale-on-hover {
      transition: transform 0.3s ease;
    }

    .scale-on-hover:hover {
      transform: scale(1.1);
    }
  </style>
</head>
<body>

  <div class="scale-on-hover pure-u-1-2">
    <h1>Hover to Scale</h1>
    <p>This box scales up when you hover over it.</p>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

transition: এই স্টাইলের মাধ্যমে এলিমেন্টটির আকারের পরিবর্তন (স্কেল) একটি মসৃণ অ্যানিমেশনের মাধ্যমে ঘটবে।
:hover: হোভার করার সময় এলিমেন্টটি স্কেল (1.1) হয়ে যাবে।

Pure.CSS সরাসরি বিল্ট-ইন অ্যানিমেশন ক্লাস প্রদান না করলেও, CSS3 Animations এবং Transitions ব্যবহার করে আপনি আপনার ওয়েবসাইটে কাস্টম অ্যানিমেশন এবং ট্রানজিশন তৈরি করতে পারেন। এটি আপনার ওয়েবসাইটের ইন্টারফেসকে আরও প্রাণবন্ত এবং ইন্টারঅ্যাকটিভ করে তুলবে, এবং ব্যবহারকারীর অভিজ্ঞতাও উন্নত করবে।

Content added By

Najjar Hossain Raju

Hover Effects এবং Button Animations

211

Pure.CSS মূলত একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক যা সিম্পল এবং দ্রুত ওয়েব ডিজাইন তৈরি করতে সহায়তা করে। যদিও Pure.CSS সরাসরি বিল্ট-ইন অ্যানিমেশন ক্লাস প্রদান করে না, তবুও আপনি CSS এর transitions এবং animations ব্যবহার করে আপনার ডিজাইনকে জীবন্ত ও ইন্টারেক্টিভ করতে পারেন। এই কোডের মাধ্যমে আপনি Hover Effects এবং Button Animations তৈরি করতে পারেন, যা ওয়েব পেজে ব্যবহারের অভিজ্ঞতাকে আরো আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।

এখানে Hover Effects এবং Button Animations তৈরি করার জন্য Pure.CSS এবং কাস্টম CSS অ্যানিমেশন ও ট্রানজিশন ব্যবহার করে কিছু উদাহরণ দেওয়া হলো।

১. Hover Effects with Pure.CSS:

Hover Effects এমন ইফেক্টস যা কোনো উপাদানে মাউস রাখলে অটোমেটিকালি সক্রিয় হয়। আপনি খুব সহজেই এই ইফেক্টসগুলো CSS এর :hover সিলেক্টর ব্যবহার করে তৈরি করতে পারেন।

উদাহরণ ১: Image Hover Effect (ইমেজে হোভার ইফেক্ট)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Image Hover Effect</title>
  <style>
    .image-container {
      position: relative;
      width: 300px;
      height: 200px;
      overflow: hidden;
      border-radius: 8px;
    }

    .image-container img {
      width: 100%;
      height: 100%;
      transition: transform 0.3s ease; /* Animation on hover */
    }

    .image-container:hover img {
      transform: scale(1.1); /* Scale the image on hover */
    }

  </style>
</head>
<body>

  <div class="image-container">
    <img src="https://via.placeholder.com/300x200" alt="Hover Image">
  </div>

</body>
</html>

বিশ্লেষণ:

.image-container: এই ক্লাসটি একটি ইমেজ কন্টেইনার তৈরি করে যা ইমেজের overflow গোপন রাখে এবং আকার নিয়ন্ত্রণ করে।
transform: scale(1.1): এটি ইমেজের আকার 10% বাড়িয়ে দেয় যখন মাউস ইমেজের উপর থাকে, ফলে একটি zoom effect তৈরি হয়।

উদাহরণ ২: Text Hover Effect (টেক্সট হোভার ইফেক্ট)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Text Hover Effect</title>
  <style>
    .hover-text {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      transition: color 0.3s ease, transform 0.3s ease;
    }

    .hover-text:hover {
      color: #0078d4; /* Change color on hover */
      transform: translateY(-5px); /* Move the text up on hover */
    }

  </style>
</head>
<body>

  <p class="hover-text">Hover over this text to see the effect!</p>

</body>
</html>

বিশ্লেষণ:

transition: এখানে টেক্সটের color এবং transform প্রপার্টি পরিবর্তনের জন্য ট্রানজিশন অ্যাপ্লাই করা হয়েছে।
transform: translateY(-5px): এটি টেক্সটকে উপরে সরিয়ে দেয়, যাতে হোভার ইফেক্ট আরও চোখে পড়তে পারে।

২. Button Animations with Pure.CSS:

Button Animations তৈরি করতে CSS এর @keyframes ব্যবহার করা হয়, যার মাধ্যমে বিভিন্ন ধরনের অ্যানিমেশন যেমন বাটনের রঙ পরিবর্তন, স্কেলিং ইত্যাদি করা সম্ভব।

উদাহরণ ১: Button Hover Animation (বাটন হোভার অ্যানিমেশন)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Button Hover Animation</title>
  <style>
    .animated-button {
      background-color: #0078d4;
      color: white;
      border: none;
      padding: 15px 25px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .animated-button:hover {
      background-color: #005fa3;
      transform: scale(1.1); /* Scale the button on hover */
    }
  </style>
</head>
<body>

  <button class="animated-button">Hover me!</button>

</body>
</html>

বিশ্লেষণ:

transform: scale(1.1): বাটনের আকার হোভার করার সময় 10% বাড়ানো হয়।
transition: এই প্রপার্টি দিয়ে হোভার করার সময় সিলেক্টেড প্রপার্টির পরিবর্তন (যেমন রঙ এবং আকার) স্নিগ্ধভাবে হতে সাহায্য করে।

উদাহরণ ২: Button Click Animation (বাটন ক্লিক অ্যানিমেশন)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Button Click Animation</title>
  <style>
    .click-animation-button {
      background-color: #28a745;
      color: white;
      border: none;
      padding: 15px 30px;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: background-color 0.3s ease;
    }

    .click-animation-button:active {
      background-color: #218838;
    }

    .click-animation-button:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300%;
      height: 300%;
      background-color: rgba(255, 255, 255, 0.3);
      transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .click-animation-button:active:after {
      width: 0;
      height: 0;
      top: 50%;
      left: 50%;
    }

  </style>
</head>
<body>

  <button class="click-animation-button">Click me!</button>

</body>
</html>

বিশ্লেষণ:

:after পসিডো-এলিমেন্ট ব্যবহার করে ক্লিকের সময় একটি সার্কুলার বাটন অ্যানিমেশন তৈরি করা হয়েছে।
:active সিলেক্টর ব্যবহার করা হয়েছে যাতে বাটন ক্লিক করার সময় সেই অ্যানিমেশন সক্রিয় হয় এবং বাটনটিতে আন্ডারলাইন বা স্কেল ইফেক্ট তৈরি হয়।

Pure.CSS একটি শক্তিশালী CSS ফ্রেমওয়ার্ক, তবে এটি সরাসরি অ্যানিমেশন বা হোভার ইফেক্টের জন্য বিল্ট-ইন ক্লাস প্রদান করে না। কিন্তু আপনি কাস্টম CSS transitions এবং keyframes ব্যবহার করে অত্যন্ত সহজে আকর্ষণীয় hover effects এবং button animations তৈরি করতে পারেন। এতে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন আরো ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি হয়ে ওঠে।

Content added By

Najjar Hossain Raju

Animation এর জন্য Best Practices

150

Pure.CSS এর মাধ্যমে Animation তৈরি করা অত্যন্ত সহজ এবং কার্যকরী হতে পারে, তবে সঠিকভাবে animation ব্যবহার করার জন্য কিছু best practices অনুসরণ করা উচিত। এই নির্দেশিকাগুলি আপনার ওয়েবসাইটের পারফরম্যান্স উন্নত করতে এবং ব্যবহারকারীর অভিজ্ঞতাকে আরও ভালো করতে সাহায্য করবে।

এখানে Pure.CSS এর মাধ্যমে Animation ব্যবহার করার জন্য কিছু best practices দেওয়া হলো।

1. Keep Animations Subtle and Purposeful

অ্যানিমেশনগুলি ব্যবহার করার সময় সেগুলি যেন খুব বেশি আড়াল বা বিভ্রান্তিকর না হয়, সেটি নিশ্চিত করতে হবে। অ্যানিমেশনগুলি এমনভাবে ব্যবহার করুন যেন সেগুলি সাইটের ব্যবহারে কোনো বাড়তি সমস্যা তৈরি না করে।

Use animations sparingly: অ্যানিমেশনটি যেখানে উপকারী, সেখানে এটি ব্যবহার করুন—যেমন বাটন বা লিঙ্কের হোভার ইফেক্টস, কার্ড উত্থাপন ইত্যাদি।
Avoid overuse: অযথা অনেক অ্যানিমেশন ব্যবহার করলে ওয়েবসাইট ধীর হয়ে যেতে পারে এবং ব্যবহারকারীর মনোযোগ হ্রাস পায়।

Example of Subtle Button Hover Animation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pure.CSS Button Hover Animation</title>
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
    <style>
        .pure-button {
            background-color: #3498db;
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5px;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .pure-button:hover {
            background-color: #2980b9;
            transform: scale(1.05); /* subtle zoom effect */
        }
    </style>
</head>
<body>

    <a href="#" class="pure-button">Hover over me!</a>

</body>
</html>

ব্যাখ্যা:

এখানে একটি subtle hover animation দেওয়া হয়েছে, যা বাটনটিকে হোভার করার সময় স্লাইটলি বড় করে এবং ব্যাকগ্রাউন্ড কালার পরিবর্তন করে। এটি খুবই মসৃণ এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

2. Use Hardware-Accelerated Properties

এটি একটি খুব গুরুত্বপূর্ণ বিষয়: CSS অ্যানিমেশনগুলো transform এবং opacity এর মতো প্রপার্টি ব্যবহার করা উচিত, কারণ এই প্রপার্টিগুলি সাধারণত GPU (Graphics Processing Unit) দ্বারা প্রক্রিয়াকৃত হয় এবং এটি পারফরম্যান্সের জন্য ভালো।

Transform: যেমন transform: translateX() বা transform: scale()।
Opacity: যেমন opacity: 0 বা opacity: 1।

এগুলো ব্যবহার করলে পারফরম্যান্স আরও উন্নত হয় এবং ওয়েবসাইটটি তাড়াতাড়ি রেন্ডার হয়।

Example of Using Transform for Animation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pure.CSS Transform Animation</title>
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
    <style>
        .card {
            width: 300px;
            height: 200px;
            background-color: #3498db;
            color: white;
            text-align: center;
            margin: 20px auto;
            padding: 20px;
            border-radius: 10px;
            transform: translateY(0);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-10px); /* Use transform for smooth animation */
        }
    </style>
</head>
<body>

    <div class="card">
        <h3>Hover Over Me</h3>
        <p>This card moves up on hover.</p>
    </div>

</body>
</html>

ব্যাখ্যা:

এখানে transform: translateY() ব্যবহার করা হয়েছে যা GPU দ্বারা প্রক্রিয়াকৃত হয় এবং এটি হালকা এবং দ্রুত অ্যানিমেশন প্রদান করে।

3. Minimize Layout Thrashing

Layout thrashing তখন ঘটে যখন ওয়েব পেজের রেন্ডারিং প্রক্রিয়াতে একাধিক রিড এবং রাইট অপারেশন বারবার করা হয়, যা পারফরম্যান্সকে কমিয়ে দেয়। অ্যানিমেশন ব্যবহারের সময় সেজন্য reflow বা repaint কম করা উচিত।

Avoid animating properties like width, height, and top/left.
Use transform and opacity instead of these properties.

Bad Practice (Animating width/height):

<style>
    .bad-animation {
        width: 0;
        transition: width 0.5s ease;
    }

    .bad-animation:hover {
        width: 300px;
    }
</style>

এই পদ্ধতিতে width পরিবর্তন করার কারণে ব্রাউজারের reflow হতে পারে, যা পারফরম্যান্স কমাতে পারে। তাই transform ব্যবহার করা উচিত।

4. Optimize for Mobile Devices

Responsive Animation তৈরি করা এবং mobile-friendly animations ব্যবহার করা খুবই গুরুত্বপূর্ণ। মোবাইল ডিভাইসগুলির জন্য অনেক বেশি অ্যানিমেশন ব্যবহার করা প্রভাব ফেলতে পারে। আপনি মোবাইলের জন্য অ্যানিমেশনগুলি নিয়ন্ত্রণ করতে পারেন।

Example of Optimizing Animation for Mobile Devices:

<style>
    .card {
        width: 300px;
        height: 200px;
        background-color: #3498db;
        color: white;
        text-align: center;
        margin: 20px auto;
        padding: 20px;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }

    .card:hover {
        transform: scale(1.1);
    }

    @media (max-width: 600px) {
        .card {
            transition: transform 0.1s ease; /* Faster animation on mobile */
        }

        .card:hover {
            transform: scale(1.05); /* Less intense animation on mobile */
        }
    }
</style>

ব্যাখ্যা:

এখানে, mobile devices এর জন্য অ্যানিমেশনটি দ্রুত এবং কম ইন্টেনসিটি দেওয়া হয়েছে, যাতে মোবাইল ডিভাইসে অ্যাপ্লিকেশন স্লো না হয়।

5. Avoid Animating Expensive Properties

এটি পূর্বে উল্লেখ করা হয়, তবে এটি পুনরায় বলার মতো: কিছু CSS প্রপার্টি খুব বেশি প্রক্রিয়া নিয়ে আসে। width, height, top, left, margin ইত্যাদি প্রপার্টি অ্যানিমেট করার চেয়ে transform এবং opacity ব্যবহার করা অধিক কার্যকরী।

Example of Expensive Property (Width & Height Animation):

<style>
    .expensive-animation {
        height: 0;
        transition: height 0.5s ease;
    }

    .expensive-animation:hover {
        height: 200px; /* Expensive operation */
    }
</style>

এখানে height অ্যানিমেট করা হয়েছে, যা layout recalculations করতে পারে, তবে transform ব্যবহার করা ভালো হবে।

6. Use Easing Functions

অ্যানিমেশনকে মসৃণ ও প্রাকৃতিক দেখতে easing functions ব্যবহার করুন। এগুলি অ্যানিমেশন চলার সময় গতি পরিবর্তন করে, যা ব্যবহারকারীকে আরো স্বাভাবিক এবং মনোরঞ্জক অভিজ্ঞতা দেয়।

Example of Using Easing Function:

<style>
    .card {
        width: 300px;
        height: 200px;
        background-color: #3498db;
        color: white;
        text-align: center;
        margin: 20px auto;
        padding: 20px;
        border-radius: 10px;
        transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .card:hover {
        transform: scale(1.1);
    }
</style>

ব্যাখ্যা:

এখানে cubic-bezier easing ফাংশন ব্যবহার করা হয়েছে যা অ্যানিমেশনকে আরো সুষম এবং মসৃণ বানায়।

Pure.CSS এর মাধ্যমে animation ব্যবহার করে আপনি ওয়েবসাইটে সুন্দর ও কার্যকরী অ্যানিমেশন যোগ করতে পারেন, তবে best practices অনুসরণ করা খুবই গুরুত্বপূর্ণ।
Subtle animations, hardware-accelerated properties, এবং media queries ব্যবহার করে আপনি পারফরম্যান্সে সমস্যা ছাড়াই কার্যকরী অ্যানিমেশন তৈরি করতে পারেন।
সঠিকভাবে transform এবং opacity ব্যবহার করার মাধ্যমে আপনি উন্নত পারফরম্যান্স নিশ্চিত করতে পারবেন।

Content added By

Najjar Hossain Raju

Pure.CSS এর পরিচিতি Pure.CSS সেটআপ এবং ইনস্টলেশন Pure.CSS এর Responsive Grid System Pure.CSS এর টেক্সট স্টাইলিং এবং টাইপোগ্রাফি Pure.CSS এর Buttons এবং Button Groups

Pure.CSS এর Animation এবং Effects

১. Basic CSS Transitions in Pure.CSS

উদাহরণ: Button Hover Effect

উদাহরণ বিশ্লেষণ:

২. CSS Keyframes Animation in Pure.CSS

উদাহরণ: Bouncing Ball Animation

উদাহরণ বিশ্লেষণ:

৩. Fade In Animation in Pure.CSS

উদাহরণ: Fade In Effect

উদাহরণ বিশ্লেষণ:

৪. Slide In Animation in Pure.CSS

উদাহরণ: Slide In Effect

উদাহরণ বিশ্লেষণ:

Pure.CSS এর Built-in Animation Classes

১. Pure.CSS এর সাথে CSS Transitions:

উদাহরণ বিশ্লেষণ:

২. Pure.CSS এর সাথে CSS Keyframe Animations:

উদাহরণ বিশ্লেষণ:

৩. Pure.CSS এর সাথে Fade In and Fade Out Effect:

উদাহরণ বিশ্লেষণ:

৪. Pure.CSS এর সাথে Slide In Animation:

উদাহরণ বিশ্লেষণ:

Custom Animations এবং Transitions তৈরি করা

১. Pure.CSS এর Built-in Animation Classes:

a) Fade-in Animation:

উদাহরণ বিশ্লেষণ:

২. Custom Animations with CSS:

a) Bounce Animation:

উদাহরণ বিশ্লেষণ:

b) Scale Animation:

উদাহরণ বিশ্লেষণ:

৩. CSS Transitions:

a) Simple Hover Transition:

উদাহরণ বিশ্লেষণ:

b) Smooth Scale on Hover:

উদাহরণ বিশ্লেষণ:

Hover Effects এবং Button Animations

১. Hover Effects with Pure.CSS:

উদাহরণ ১: Image Hover Effect (ইমেজে হোভার ইফেক্ট)

বিশ্লেষণ:

উদাহরণ ২: Text Hover Effect (টেক্সট হোভার ইফেক্ট)

বিশ্লেষণ:

২. Button Animations with Pure.CSS:

উদাহরণ ১: Button Hover Animation (বাটন হোভার অ্যানিমেশন)

বিশ্লেষণ:

উদাহরণ ২: Button Click Animation (বাটন ক্লিক অ্যানিমেশন)

বিশ্লেষণ:

Animation এর জন্য Best Practices

1. Keep Animations Subtle and Purposeful

Example of Subtle Button Hover Animation:

ব্যাখ্যা:

2. Use Hardware-Accelerated Properties

Example of Using Transform for Animation:

ব্যাখ্যা:

3. Minimize Layout Thrashing

Bad Practice (Animating width/height):

4. Optimize for Mobile Devices

Example of Optimizing Animation for Mobile Devices:

ব্যাখ্যা:

5. Avoid Animating Expensive Properties

Example of Expensive Property (Width & Height Animation):

6. Use Easing Functions

Example of Using Easing Function:

ব্যাখ্যা:

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!